<template>
    <div class="bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[30px]">
            <span class="text-[16px]">会员列表</span>
        </div>
        <div class="mb-[10px] bg-[#f7f8fa] rounded-[4px] px-[20px] pt-[20px] pb-[10px]">
            <a-form layout="inline" ref="formRef" :model="searchParam">
                <a-form-item label="姓名" name="title">
                    <a-input class="w-[200px] mb-[10px]" allow-clear v-model:value="searchParam.username"
                        placeholder="请输入姓名" />
                </a-form-item>
                <a-form-item label="电话" name="phone">
                    <a-input class="w-[200px] mb-[10px]" allow-clear v-model:value="searchParam.phone"
                        placeholder="请输入标题" />
                </a-form-item>
                <a-form-item label="电话" name="status">
                    <a-select ref="select" v-model:value="searchParam.status" class="!w-[200px] mb-[10px]">
                        <a-select-option :value="-1">全部</a-select-option>
                        <a-select-option :value="1">正常</a-select-option>
                        <a-select-option :value="0">注销</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item>
                    <a-button type="primary" html-type="submit" @click="onSearch">
                        搜索
                    </a-button>
                    <a-button class="ml-[16px]" @click="resetForm">重置</a-button>
                </a-form-item>
            </a-form>
        </div>
        <a-table :columns="columns" :data-source="searchTable.data" :pagination="pagination"
            :loading="searchTable.loading" @change="onChange">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'status'">
                    <a-tag color="#87d068" v-if="record.status == 1">正常</a-tag>
                    <a-tag color="orange" v-else>注销</a-tag>
                </template>
                <template v-if="column.dataIndex === 'avatar'">
                    <a-avatar :size="46">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a-button type="primary" size="small" class="!text-[12px]">详情</a-button>
                </template>
            </template>
        </a-table>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue';
import type { UnwrapRef } from 'vue';
import { UserList } from '@/utils/api/user';
import { message } from 'ant-design-vue';
import { UserOutlined } from '@ant-design/icons-vue';

const formRef = ref();

const searchTable = reactive({
    total: 0,
    loading: false,
    data: [],
})

// 列表分页数据
const pagination = computed(() => ({
    total: searchTable.total,
    current: searchParam.page,
    pageSize: searchParam.per_page,
}));

interface FormState {
    username: string;
    phone: string;
    status: number;
    page: number;
    per_page: number;
}

const searchParam: UnwrapRef<FormState> = reactive({
    username: '',
    phone: '',
    status: -1,
    page: 1,
    per_page: 10
});

const onChange = (pag: { pageSize: number; current: number }) => {
    searchParam.page = pag.current;
    searchParam.per_page = pag.pageSize;
    onSearch();
};

const resetForm = () => {
    formRef.value.resetFields();
};

const columns = [
    {
        title: 'ID',
        dataIndex: 'user_id',
        key: 'user_id',
        width: '100px'
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        width: '80px'
    },
    {
        title: '姓名',
        dataIndex: 'username',
        key: 'username',
        width: '200px'
    },
    {
        title: '电话',
        dataIndex: 'phone',
        key: 'phone',
        width: '200px',
        responsive: ['lg'],
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: '200px',
        responsive: ['lg'],
    },
    {
        title: '注册时间',
        dataIndex: 'created_at',
        key: 'created_at',
        responsive: ['lg'],
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];

onMounted(() => {
    onSearch();
});

// 初始化数据
const onSearch = () => {
    searchTable.loading = true;
    UserList(searchParam).then((res: any) => {
        searchParam.page = res.data.current_page;
        searchParam.per_page = res.data.per_page;
        searchTable.total = res.data.total;
        searchTable.data = res.data.data;

        searchTable.loading = false;
    }).catch((e: any) => {
        message.error(e.message);
        searchTable.loading = false;
    })
};
</script>